<template>
    <a-modal v-model:visible="visible" :closable="false" :width="1000" :wrap-style="{ overflow: 'hidden' }"
        @ok="onClose">
        <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
            <a-row :gutter="24">

                <a-col :span="16">
                    <a-form-item name="name">
                        <a-input v-model:value="searchFormState.name" placeholder="请输入检索条件" />
                    </a-form-item>
                </a-col>

                <a-col :span="8" class="text-right">
                    <a-button type="primary" @click="refresh(true)">查询</a-button>
                </a-col>
            </a-row>
        </a-form>
        <s-table ref="tableRef" tableLayout="fixed" :customRow="onselectRow" :row-selection="{
        type: 'checkbox',
        selectedRowKeys: selectedRowKeys, onChange: onSelectChange
    }" :size="5" :data="loadData" bordered :columns="columns" class="mb-2">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'index'">
                    {{ index + 1 }}
                </template>

                <template v-if="column.key === 'unitPrice'">
                    <a-input-number :precision="2" :min="0"  v-model:value="record.unitPrice"></a-input-number>
                </template>
                <template v-if="column.key === 'quantity'">
                    <a-input-number v-model:value="record.quantity"></a-input-number>
                </template>
                <template v-if="column.key === 'tax'">
                    <a-input-number :precision="2" :min="0"  v-model:value="record.tax"></a-input-number>
                </template>
                <template v-if="column.key === 'taxAmount'">
                    <a-input-number :precision="2" :min="0"  v-model:value="record.taxAmount"></a-input-number>
                </template>
                <template v-if="column.key === 'totalAmount'">

                    {{ record.taxAmount && record.quantity ? (record.taxAmount * record.quantity) : 0 }}
                </template>
            </template>
        </s-table>
    </a-modal>
</template>
<script setup>
import api from '@/api/warehouse/warehouseApi'
import { progressOptions } from '@/utils/constants.js'
import { ref } from 'vue';



const searchFormState = ref({})

const loadData = (parameter) => {
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return api.findPage(searchFormState.value).then((res) => {
        return res
    })
}

const visible = ref(false)
const show = () => {
    visible.value = true
}



const selectedRowKeys = ref([])
const selectRecords = ref({})
const onSelectChange = (selectedKeys, selectedRows) => {
    selectedRowKeys.value = selectedKeys;
    selectRecords.value = selectedRows
    console.log('selectedRowKeys changed: ', selectedRowKeys);
}
const onselectRow = (columns, index) => {
    return {
        onClick: (event) => {
            console.log('onselectRow clicked', columns, index);
            selectedRowKeys.value = [columns["key"]]
        },
    }
}
const emits = defineEmits(['onClose'])
const onClose = () => {
    visible.value = false;
    emits('onClose', selectedRowKeys.value, selectRecords.value)
};
defineExpose({
    show
});
const tableRef = ref()
const refresh = () => {
    tableRef.value.refresh(true)
}
const columns = [
    {
        title: '编号',
        dataIndex: 'productNo',
        key: 'productNo',
        width: 80,
        align: "center",
        ellipsis: true
    },
    {
        title: '产品名称',
        dataIndex: 'product',
        key: 'product',
        width: 120,
        align: "center",
        ellipsis: true
    },
    {
        title: '单位',
        dataIndex: 'productUnit',
        key: 'productUnit',
        width: 80,
        align: "center",
        ellipsis: true
    },
    {
        title: '规格型号',
        dataIndex: 'productSpec',
        key: 'productSpec',
        width: 100,
        align: "center",
        ellipsis: true
    },


    // {
    //     title: '单价',
    //     dataIndex: 'unitPrice',
    //     key: 'unitPrice',
    //     width: 110,
    //     align: "center",
    // },
    // {
    //     title: '数量',
    //     dataIndex: 'quantity',
    //     key: 'quantity',
    //     width: 110,
    //     align: "center",
    // },
    // {
    //     title: '税率',
    //     dataIndex: 'tax',
    //     key: 'tax',
    //     width: 110,
    //     align: "center",
    // },
    // {
    //     title: '含税价格',
    //     dataIndex: 'taxAmount',
    //     key: 'taxAmount',
    //     width: 110,
    //     align: "center",
    // },
    // {
    //     title: '总价',
    //     dataIndex: 'totalAmount',
    //     key: 'totalAmount',
    //     width: 80,
    //     align: "center",
    // },
]

</script>